<template>
  <div>
    <sub-header pathName="/new" :tab="1"> </sub-header>
    <div class="rypage container">
      <div class="content_wrapper listnews">
        <ul class="content_list clearfix">
          <li
            class="item_block wow"
            style="visibility: visible; animation-name: fadeInUp"
            v-for="(item, index) in dataArr"
            :key="index"
          >
            <router-link
              class="item_box"
              :to="{ name: 'NewDetail', query: { id: item.id } }"
            >
              <div class="item_img" target="_blank">
                <img :src="item.cover | pathImg" />
                <div class="item_mask"></div>
              </div>
              <div class="item_wrapper">
                <p class="date_wrap">
                  <span class="md">{{ item.utime | dateFormat }}</span>
                </p>
                <div class="item_info">
                  <p class="title ellipsis">
                    {{ item | filterTitle }}
                  </p>
                </div>
                <div class="item_des">
                  <p class="description">
                    {{ item | filterDescription }}
                  </p>
                </div>
              </div>
            </router-link>
            <router-link
              :to="{ name: 'NewDetail', query: { id: item.id } }"
              class="details"
            >
              &nbsp;&nbsp;{{ $t("detail") }}&nbsp;>
            </router-link>
            <div class="clearfix"></div>
          </li>
        </ul>
      </div>
      <pagination
        @clickPage="clickPage"
        :page="page"
        :total_page="total_page"
      ></pagination>
    </div>
  </div>
</template>
<script>
import SubHeader from '@/components/subHeader/subHeader.vue'
import Pagination from '@/components/Pagination.vue'

import { getCateData } from '@/service/getData.js'
export default {
  components: {
    'sub-header': SubHeader,
    'pagination': Pagination
  },
  data() {
    return {
      dataArr: [],
      page: 1,
      total_page: 1,
      cateId: 11
    }
  },
  created() {
    this.getCate()
  },
  methods: {
    clickPage(page) {
      this.page = page;
      this.getCate();
    },
    async getCate() {
      if (this.page < 1 || this.page > this.total_page) return
      let res = await getCateData(this.cateId, this.page)
      this.total_page = res.total_page || 1
      if (res && res.content && res.content.length > 0) {
        this.dataArr = res.content || []
      }
    }
  },

}
</script>
<style scoped>
@import url("./New/new.css");
</style>